<template>
  <div>
    <header-page></header-page>
    <section class="main">
        <div class="banner">
            <!-- banner图片 -->
            <div class="banner_hua">
                <img
                src="../../assets/images/youimg/sumptuous-videobg.jpg"
                alt=""
                />
            </div>
            <div class="banner_info">
                <div class="com_width">
                    <div class="banner_h1">设计师臻选</div>
                    <div class="banner_h2">送出的每束花均由资深花艺师亲手制作</div>
                    <div class="banner_tips"><p>30多个核心城市已开通服务，其它城市陆续开通...</p></div>
                    <ul class="banner_desc">
                        <li><i class="hcon hcon-flower"></i>精选稀有花材，给你不一样的视觉享受</li>
                        <li><i class="hcon hcon-camera"></i>送前花束实拍，效果提前知道</li>
                        <li><i class="hcon hcon-chat"></i>客服一对一服务,全程尽享尊贵体验</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 高端花盒系列 -->
        <div class="product black">
            <div class="com-width">
                <div class="title">高端花盒系列</div>
                <a href="#" class="product-item">
                    <div class="product-item-pic">
                        <img src="../../assets/images/youimg/9012296.jpg" />
                    </div>
                    <div class="product-item-info">
                        <div class="product-item-info__hd">
                            <div class="product-info-left">
                                <p class="product-info-name">情迷尼斯</p>
                                <p class="product-info-tag">糖果玫瑰<span>76cm长形礼盒</span></p>
                            </div>
                            <div class="product-info-right">
                                <p>RMB</p>
                                <div class="product-info-price" data-id="9012296">599</div>
                            </div>
                        </div>
                        <div class="product-item-info__desc">花材上选用的是稀有玫瑰品种A级玫瑰，每一朵的花型都要求完美，糖果玫瑰如其名，有着甜美的色彩和香味。为玫瑰定制了专属的礼盒，完美的细节彰显品质。</div>
                    </div>
                </a>
                <div class="product-listm" v-for="(item,index) in arr" :key="index">
                    <a href="#" class="product-itemm">
                        <div class="product-item-picm"><img :src="require('../../assets/images/youimg/'+item.img)" alt=""></div>
                        <div class="product-item-infom">
                            <div class="product-item-info__hdm">
                                <div class="product-info-leftm">
                                    <p class="product-info-namem">{{item.name}}</p>
                                    <p class="product-info-tagm">{{item.tag}}<span>{{item.specifi}}</span></p>
                                </div>
                                <div class="product-info-rightm">
                                    <p>RMB</p>
                                    <div class="product-info-pricem" data-id="9012300">{{item.price}}</div>
                                </div>
                            </div>
                            <div class="product-item-info__descm">{{item.content}}</div>
                        </div>
                    </a>
                </div>
            </div>    
        </div>
         <!-- 主题花束系列 -->
        <div class="product black bkg">
            <div class="com-width">
                <div class="title">主题花束系列</div>
                <a href="#" class="product-item">
                    <div class="product-item-pic">
                        <img src="../../assets/images/youimg/9012323_full.jpg" />
                    </div>
                    <div class="product-item-info infom">
                        <div class="product-item-info__hd">
                            <div class="product-info-left">
                                <p class="product-info-name namem">火热的爱</p>
                                <p class="product-info-tag tagm">爱情系列之热情奔放<span>76cm长形礼盒</span></p>
                            </div>
                            <div class="product-info-right">
                                <p>RMB</p>
                                <div class="product-info-price" data-id="9012296">520</div>
                            </div>
                        </div>
                        <div class="product-item-info__desc">饱满圆润的花头，紧促的拥抱在一起，红玫瑰与多头红玫瑰的组合，大大小小的花苞们，像极了轻盈的泡泡，花瓣就像裙裾一样层层叠叠，正是我向往中的那片花海，红玫表达的爱简单直接而炙热，除了爱你还是爱你。此花束适合送给热恋中人。</div>
                    </div>
                </a>
                <div class="product-listm" v-for="(item,index) in arrr" :key="index">
                    <a href="#" class="product-itemm">
                        <div class="product-item-picm"><img :src="require('../../assets/images/youimg/'+item.img)" alt=""></div>
                        <div class="product-item-infom infom">
                            <div class="product-item-info__hdm hdm">
                                <div class="product-info-leftm">
                                    <p class="product-info-namem namem">{{item.name}}</p>
                                    <p class="product-info-tagm tagm">{{item.tag}}<span>{{item.specifi}}</span></p>
                                </div>
                                <div class="product-info-rightm">
                                    <p>RMB</p>
                                    <div class="product-info-pricem" data-id="9012300">{{item.price}}</div>
                                </div>
                            </div>
                            <div class="product-item-info__descm">{{item.content}}</div>
                        </div>
                    </a>
                </div>
            </div>    
        </div>
    </section>
    <footer-page></footer-page>
    <side-Page></side-Page>
  </div>
</template>
<script>
import HeaderPage from "../../components/Header/header.vue"
import footerPage from "../../components/Footer/footer.vue"
import sidePage from "../../components/Side/side.vue"
export default {
    components:{
    HeaderPage,
    footerPage,
    sidePage
  },
  data() {
    return {
      arr: [],
      arrr: [],
    };
  },
  mounted() {
    this.$axios.get("../../static/data/you.json").then((res) => {
      console.log(res);
      this.arr = res.data.data;
      console.log(this.arr);
    });
     this.$axios.get("../../static/data/you.json").then((res) => {
      console.log(res);
      this.arrr = res.data.dataa;
      console.log(this.arrr);
    });
  },
  
};
</script>
<style scoped lang='less'>
.main{
    width: 100%;
    margin: 0;
    .banner{
        position: relative;
        width: 100%;
        height: 590px;
        min-width: 1200px;
        margin-bottom: 0;
        .banner_hua{
            img{
                width: 100%;
                height: 590px;
            }
        }
        .banner_info{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 590px;
            z-index: 50;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.6);
            .com_width{
                width: 1200px;
                margin: 0 auto;
                .banner_h1{
                    font-size: 0;
                    line-height: 84px;
                    width: 483px;
                    height: 91px;
                    margin: 150px auto 0;
                    background: url(../../assets/images/youimg/bannertitle.png) no-repeat center center;
                    background-size: contain;
                }
                .banner_h2{
                    margin-top: 20px;
                    font-size: 36px;
                    line-height: 50px;
                }
                .banner_tips{
                    margin-top: 10px;
                    p{
                        display: inline-block;
                        width: 400px;
                        margin: 0 auto;
                        font-size: 18px;
                        position: relative;
                        border-top: 1px solid #ffffff;
                        border-bottom: 1px solid #ffffff;
                    }
                }
                .banner_desc{
                    display: inline-block;
                    list-style: none;
                    margin-top: 10px;
                    line-height: 25px;
                    li{
                        text-align: left;
                        font-size: 16px;
                        .hcon {
                            display: inline-block;            
                            vertical-align: bottom;
                            background-size: 20px;
                            width: 20px;
                            height: 20px;       
                            margin-right: 8px;
                        }
                        .hcon-flower {
                             background-image: url(../../assets/images/youimg/iconflower.png);
                        }
                        .hcon-camera {
                            background-image: url(../../assets/images/youimg/iconcamera.png);
                        }
                        .hcon-chat {
                            background-image: url(../../assets/images/youimg/iconchat.png);
                        }
                    }
                }
            }
        }
    }
    .black{
        height: 2495px;
        background-color: #696C6F;
        background-image: url(../../assets/images/youimg/bgblack.jpg);
        background-repeat: repeat;
        background-position: left top;
        .com-width {
            width: 1200px;
            margin: 0 auto;
            .title{
                font-size: 36px;
                text-align: center;
                padding: 36px 0;
                letter-spacing: 4px;
            }
            // 第一部分
            .product-item {
                display: block;
                float: left;
                width: 564px;
                margin: 0px 36px -35px;
                text-decoration: none;
                // position: absolute;
                outline: none;
            }
            .product-item .full {
                width: 100%;
                margin: 0;
            }
            .product-item-pic{
                margin-right: 20px;
            }
            .product-item-info {
                width: 415px;
                position: relative;
                left: auto;
                top: auto;
                right: -735px;
                bottom: 225px;
                background-color: #494949;
                color: #fff;
            }
            .product-item-info__hd {
                border-left: 4px solid #777777;
                overflow: hidden;
                border-color: #BCBCBC;
                margin-left: 20px;
                padding: 10px 20px;
            }
            .product-info-left {
                float: left;
                box-sizing: border-box;
                height: 48px;
                overflow: hidden;
                padding-left: 12px;
                padding-top: 4px;
                
                .product p {
                    margin: 0;
                    font-size: 12px;
                }
                p{
                    color: #fff;
                }
                .product-info-tag {
                    font-size: 18px;
                    line-height: 26px;
                    margin-top: -8px;
                    span {
                        font-size: 14px;
                        margin-left: 20px;
                    }
                }
            }
            .product-info-right {
                float: right;
                box-sizing: border-box;
                width: 48px;
                height: 48px;
                overflow: hidden;
                background-color: #232323;
                color: #fff;
                text-align: center;
                padding: 4px 0;
                font-size: 0;
                p {
                    font-size: 12px;
                    line-height: 16px;
                    letter-spacing: 2px;
                }
                .product-info-price {
                    font-size: 20px;
                    line-height: 11px;
                }
            }
            .product-item-info__desc {
                font-size: 10px;
                color: #777777;
                margin-top: 8px;
                padding: 15px 20px;
                color: #BCBCBC;
            }
            .product-list {
                margin: 0 -36px;
                padding-bottom: 72px;
            }
        }
        // 第二部分
        .product-itemm {
                display: block;
                float: left;
                width: 562px;
                text-align: center;
                margin: 0px 36px -5px;
                text-decoration: none;
                outline: none;
            }
            .product-item .fullm {
                width: 100%;
                margin: 0;
            }
            .product-item-picm{
                margin-right: -80px;
            }
            .product-item-infom {
                width: 405px;
                position: relative;
                left: auto;
                top: auto;
                right: -125px;
                bottom: 25px;
                background-color: #494949;
                color: #fff;
            }
            .product-item-info__hdm {
                border-left: 4px solid #777777;
                overflow: hidden;
                border-color: #BCBCBC;
                margin-left: 10px;
                padding: 10px 15px;
            }
            .product-info-leftm {
                float: left;
                box-sizing: border-box;
                height: 48px;
                overflow: hidden;
                padding-left: 12px;
                padding-top: 4px;
                .product p {
                    // margin: 0;
                    font-size: 12px;
                }
                .product-info-tagm {
                    font-size: 18px;
                    line-height: 26px;
                    margin-top: -8px;
                    span {
                        font-size: 14px;
                        margin-left: 20px;
                    }
                }
            }
            .product-info-rightm {
                float: right;
                box-sizing: border-box;
                width: 48px;
                height: 48px;
                overflow: hidden;
                background-color: #232323;
                color: #fff;
                text-align: center;
                padding: 4px 0;
                font-size: 0;
                p {
                    font-size: 12px;
                    line-height: 16px;
                    letter-spacing: 2px;
                }
                .product-info-pricem {
                    font-size: 20px;
                    line-height: 11px;
                }
            }
            .product-item-info__descm {
                font-size: 10px;
                color: #777777;
                margin-top: 8px;
                padding: 10px 20px;
                color: #BCBCBC;
            }
            .product-listm {
                margin: 0 -36px;
                padding-bottom: 72px;
            }
    }
    .bkg{
        height: 5100px;
        background-image: url(../../assets/images/youimg/bgwhite.jpg);
        .infom{
        background-color: #ffffff;
        }
        .hdm{
            border-left: 4px solid #777777;
        }
        .namem{
            color: #232323;
        }
        .tagm{
            color: #232323;
        }
    }
  
}
</style>